<template>
  <div>
    <ul style="height: 90vh;">
      <li class="collection">
        <router-link active-class="active" :to="{ name: 'myinnercollect',query:{blocked:0}}">
          <div class="big">
            <div class="box">
              <img src="/src/assets/fd8a33482b0ea119d3b16bd1d5e67a22.png" alt="">
              <a>公开收藏夹</a>
            </div>

          </div>
        </router-link>
      </li>
      <li class="collection">
        <router-link active-class="active" :to="{ name: 'myinnercollect',query:{blocked:1}}">
          <div class="big">
            <div class="box">
              <img src="/src/assets/fd8a33482b0ea119d3b16bd1d5e67a22.png" alt="">
              <a>私人收藏夹</a>
            </div>
          </div>
        </router-link>
      </li>

    </ul>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import axios from 'axios'
import { Icon } from '@iconify/vue';
// interface good {
//     imageUrl: string
//     goodsName: string
//     goodsPrice: number
//     goodsId: string
// }
// let goods: good[] = reactive([])
// choseFood('皮')
// async function choseFood(food: string) {
//     await axios({
//         url: 'https://hmajax.itheima.net/api-s/searchGoodsList',
//         params: {
//             searchText: food,
//             string: 1,
//             everyNum: 25
//         }
//     }).then(res => {
//         Object.assign(goods, res.data.list.data)
//     })
// }
</script>

<style scoped>
ul {
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  list-style: none;
  margin-left: 100px;
  margin-top: 100px;
 
}

ul li+li {
  margin-left: 300px;
}

.big {
  height: 300px;
  width: 300px;
  /* background-color: #fff; */
  margin: auto;
  padding: 15px;
  transition: all 0.3s ease;
  
}

.big:hover {
  transform: translateY(-5px);
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); */
}

.box:hover img {
  transform: scale(1.05);
}

.box {
  /* height: 180px;
  width: 180px; */
  position: relative;
  overflow: hidden;
  
  /* border-radius: 8px; */
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
a {
  display: block;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}
 
</style>